<template>
  <div class="sc-list-table">
    <el-card class="box-card">
      <el-table
        ref="listClientTable"
        v-loading="loading"
        lazy
        :load="load"
        :header-cell-style="{ backgroundColor: '#d3dbeb' }"
        :max-height="540"
        :border="true"
        row-key="id"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :data="listData"
        @selection-change="handleSelectionChange"
      >
        <ListTableItem v-for="(item, index) in tableCol" :key="index" :attrs="item">
          <template v-if="item.custom" :slot="item.custom" slot-scope="scope">
            <slot :name="item.custom" v-bind="scope"></slot>
          </template>
        </ListTableItem>
      </el-table>
      <div v-if="page" class="sc-list-table-pager">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          style="color: #586aa6"
          :current-page="pagerData.pageIndex"
          :total="pagerData.count"
          :page-size="pagerData.pageSize"
          :page-sizes="[10, 20, 30, 40, 50]"
          @current-change="pageChange"
          @size-change="pageSizeChange"
        />
      </div>
    </el-card>
  </div>
</template>

<script>
import ListTableItem from './components/ListTableItem'
import request from '@/utils/request'
import { mapGetters } from 'vuex'
export default {
  components: {
    ListTableItem
  },
  props: {
    lazy: {
      type: Boolean,
      default() {
        return false
      }
    },
    hed: {
      type: String,
      default() {
        return ''
      }
    },
    page: {
      type: Boolean,
      default() {
        return true
      }
    },
    loading: {
      type: Boolean,
      default() {
        return false
      }
    },
    tableData: {
      type: Array,
      default() {
        return []
      }
    },
    tableCol: {
      type: Array,
      default() {
        return []
      }
    },
    pager: {
      type: Object,
      default() {
        return {}
      }
    },
    noQuery: {
      type: Boolean,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      listData: [],
      ary: false,
      pagerData: {
        pageIndex: 1,
        count: 0,
        pageSize: 10,
        ...this.pager
      },
      // 是否使用接口查询
      interfaceSwitch: false,
      interfaceUrl: ''
    }
  },
  computed: {
    ...mapGetters(['attendanceDate', 'serchObj'])
  },
  watch: {
    tableData: function (newValue, oldValue) {
      this.listData = newValue
    }
  },
  methods: {
    load: function (tree, treeNode, resolve) {
      this.$emit('loadHandler', tree, treeNode, resolve)
    },
    handleSelectionChange(event) {
      this.$emit('selectChange', event)
    },
    async setQuery(query) {
      query = Object.assign({ search: [] }, this.serchObj, query)
      if (this.interfaceSwitch) {
        const res = await request(this.interfaceUrl, 'GET', query)

        this.listData = res.data.items
      } else {
        await this.$store.dispatch('app/setSerchObj', query)
      }
    },
    pageSizeChange(pageSize) {
      this.pagerData.pageSize = pageSize
      this.pagerData.pageIndex = 1
      this.$emit('size-change', pageSize)
      if (this.noQuery === false) {
        this.setQuery({
          pageSize,
          pageIndex: 1
        })
      }
    },
    pageChange(pageIndex) {
      this.$emit('page-change', pageIndex)
      if (this.noQuery === false) {
        const tmpObj = this.attendanceDate.status
          ? {
            pageIndex,
            pageSize: this.pagerData.pageSize,
            orderBy: 'createdTime',
            orderByAscent: false,
            EnterTimeStart: this.attendanceDate.EnterTimeStart,
            EnterTimeEnd: this.attendanceDate.EnterTimeEnd
          }
          : {
            pageIndex,
            pageSize: this.pagerData.pageSize,
            orderBy: 'createdTime',
            orderByAscent: false
          }
        this.setQuery(tmpObj)
      }
    },
    update({ page, count }, url = false) {
      if (url) {
        this.interfaceSwitch = true
        this.interfaceUrl = url
      }
      this.pagerData.pageIndex = page
      this.pagerData.count = count
      if (this.noQuery === false) {
        const { pageSize } = this.serchObj
        if (pageSize) this.pagerData.pageSize = this._.toSafeInteger(pageSize)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .sc-list-table-pager {
    display: flex;
    justify-content: center;
  }
</style>
